<!--
 * @author: 十一
 * @since: 2024-07-23
 * index.vue
 * @desc: new page
-->
<template>
  <a-row :gutter="15">
    <a-col
      :xxl="{ span: 12 }"
      :xl="{ span: 12 }"
      :lg="{ span: 12 }"
      :md="{ span: 24 }"
      :sm="{ span: 24 }"
      :xs="{ span: 24 }"
    >
      <a-card :bordered="false">
        <a-card-meta title="商品定价">
          <template #description>商品成本 = 进货价格</template>
          <template #avatar>
            <a-avatar src="http://qiniuyun.ziyoujike.cn/FTPdingjia.png" />
          </template>
        </a-card-meta>
        <br />
        <a-form>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.cost"
              placeholder="输入商品成本(元)"
              :min="1"
            />
          </a-form-item>
          <a-form-item>
            <a-input-number
              :min="1"
              :max="99"
              :controls="false"
              style="width: 100%"
              v-model:value="formState.grossMargin"
              placeholder="你想获取多少的毛利润,毛利润最高不超过100% (1-99)"
            />
          </a-form-item>
          <a-form-item>
            <a-button style="width: 100%" @click="handleClick(0)">计算</a-button>
          </a-form-item>
          <p class="text-center text-red-600">{{ fixAPriceResult }}</p>
        </a-form>
      </a-card>
      <br />
    </a-col>
    <a-col
      :xxl="{ span: 12 }"
      :xl="{ span: 12 }"
      :lg="{ span: 12 }"
      :md="{ span: 24 }"
      :sm="{ span: 24 }"
      :xs="{ span: 24 }"
    >
      <a-card :bordered="false">
        <a-card-meta title="毛利率计算">
          <template #description>商品成本 = 进货价格</template>
          <template #avatar>
            <a-avatar src="http://qiniuyun.ziyoujike.cn/shouyiyulishuai.png" />
          </template>
        </a-card-meta>
        <br />
        <a-form>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.grossMarginCost"
              :min="1"
              placeholder="输入商品成本(元)"
            />
          </a-form-item>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.grossMarginPiice"
              placeholder="输入商品售价(元)"
            />
          </a-form-item>
          <a-form-item>
            <a-button style="width: 100%" @click="handleClick(1)">计算</a-button>
          </a-form-item>
          <p class="text-center text-red-600">{{ grossMarginResult }}</p>
        </a-form>
      </a-card>
      <br />
    </a-col>
    <a-col
      :xxl="{ span: 12 }"
      :xl="{ span: 12 }"
      :lg="{ span: 12 }"
      :md="{ span: 24 }"
      :sm="{ span: 24 }"
      :xs="{ span: 24 }"
    >
      <a-card :bordered="false">
        <a-card-meta title="保本营业额计算(/月)">
          <template #avatar>
            <a-avatar src="http://qiniuyun.ziyoujike.cn/ludeng.png" />
          </template>
          <template #description>固定支出包含:房租，水电。人工等固定开销(/月)</template>
        </a-card-meta>
        <br />
        <a-form>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.guaranteedRevenueFixedExpenses"
              placeholder="输入固定支出(元)"
            />
          </a-form-item>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.guaranteedRevenueGrossMargin"
              placeholder="输入毛利率 ( % )"
            />
          </a-form-item>
          <a-form-item>
            <a-button style="width: 100%" @click="handleClick(2)">计算</a-button>
          </a-form-item>
          <p class="text-center text-red-600">{{ guaranteedRevenueResult }}</p>
        </a-form>
      </a-card>
      <br />
    </a-col>

    <a-col
      :xxl="{ span: 12 }"
      :xl="{ span: 12 }"
      :lg="{ span: 12 }"
      :md="{ span: 24 }"
      :sm="{ span: 24 }"
      :xs="{ span: 24 }"
    >
      <a-card :bordered="false">
        <a-card-meta title="油耗计算">
          <template #avatar>
            <a-avatar src="http://qiniuyun.ziyoujike.cn/oilConsumption.png" />
          </template>
          <template #description>1公里的费用</template>
        </a-card-meta>
        <br />
        <a-form>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.oilConsumption"
              placeholder="输入油耗（百公里）"
            />
          </a-form-item>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.oilPrice"
              placeholder="输入当前油价(元)"
            />
          </a-form-item>
          <a-form-item>
            <a-button style="width: 100%" @click="handleClick(4)">计算</a-button>
          </a-form-item>
          <p class="text-center text-red-600">{{ oilConsumptionResult }}</p>
        </a-form>
      </a-card>
      <br />
    </a-col>
    <a-col
      :xxl="{ span: 12 }"
      :xl="{ span: 12 }"
      :lg="{ span: 12 }"
      :md="{ span: 24 }"
      :sm="{ span: 24 }"
      :xs="{ span: 24 }"
    >
      <a-card :bordered="false">
        <a-card-meta title="月回本营收计算">
          <template #description>固定支出包含:房租，水电。人工等固定开销</template>
          <template #avatar>
            <a-avatar src="http://qiniuyun.ziyoujike.cn/lirun.png" />
          </template>
        </a-card-meta>
        <br />
        <a-form>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.monthlyRevenueTotalInvestment"
              placeholder="输入店铺总投入资金金额(元)"
            />
          </a-form-item>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.monthlyRevenueFixedExpenses"
              placeholder="输入固定支出 ( / 月 / 元)"
            />
          </a-form-item>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.monthlyRevenueMonth"
              placeholder="你想几个月回本(月)"
            />
          </a-form-item>
          <a-form-item>
            <a-input-number
              :controls="false"
              style="width: 100%"
              v-model:value="formState.monthlyRevenueGrossMargin"
              placeholder="输入毛利率 ( % ) "
            />
          </a-form-item>
          <a-form-item>
            <a-button style="width: 100%" @click="handleClick(3)">计算</a-button>
          </a-form-item>
          <p class="text-center text-red-600">{{ monthlyRevenueResult }}</p>
        </a-form>
      </a-card>
      <br />
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
interface FormState {
  cost: string | null | number // 定价成本
  grossMargin: string | null | number // 定价毛利率
  grossMarginCost: string | null | number //毛利率(成本)
  grossMarginPiice: string | null | number //毛利率(售价)
  guaranteedRevenueFixedExpenses: string | null | number //保本营业额(固定支出)
  guaranteedRevenueGrossMargin: string | null | number //保本营业额(毛利率)
  monthlyRevenueTotalInvestment: string | null | number //月回本营收(店铺总投入资金金额)
  monthlyRevenueFixedExpenses: string | null | number //月回本营收(固定支出)
  monthlyRevenueMonth: string | null | number //月回本营收(月)
  monthlyRevenueGrossMargin: string | null | number //月回本营收(毛利率)
  oilConsumption: string | null | number //油耗
  oilPrice: string | null | number // 油价
}
const formState = reactive<FormState>({
  cost: null,
  grossMargin: null,
  grossMarginCost: null,
  grossMarginPiice: null,
  guaranteedRevenueFixedExpenses: null,
  guaranteedRevenueGrossMargin: null,
  monthlyRevenueTotalInvestment: null,
  monthlyRevenueFixedExpenses: null,
  monthlyRevenueMonth: null,
  monthlyRevenueGrossMargin: null,
  oilConsumption: null,
  oilPrice: null
})
const fixAPriceResult = ref('')
const grossMarginResult = ref('')
const guaranteedRevenueResult = ref('')
const monthlyRevenueResult = ref('')
const oilConsumptionResult = ref('')
const handleClick = (index: number) => {
  if (index === 0) {
    fixAPriceResult.value = `您的商品定价为: ${Number((formState.cost as number) / (1 - Number(formState.grossMargin) / 100)).toFixed(2)}元`
  }
  if (index === 1) {
    grossMarginResult.value = `您的毛利率为: ${(Number(((formState.grossMarginPiice as number) - (formState.grossMarginCost as number)) / (formState.grossMarginPiice as number)) * 100).toFixed(2)}%`
  }
  if (index === 2) {
    guaranteedRevenueResult.value = `您的月保本营业额为: ${Number((formState.guaranteedRevenueFixedExpenses as number) / ((formState.guaranteedRevenueGrossMargin as number) / 100)).toFixed(2)}元  , 
    您的日保本营业额为: ${Number((formState.guaranteedRevenueFixedExpenses as number) / ((formState.guaranteedRevenueGrossMargin as number) / 100) / 30).toFixed(2)}元 `
  }
  if (index === 3) {
    monthlyRevenueResult.value = `您的每月回本营业额为: ${(((formState.monthlyRevenueTotalInvestment as number) / (formState.monthlyRevenueMonth as number) + (formState.monthlyRevenueFixedExpenses as number)) / ((formState.monthlyRevenueGrossMargin as number) / 100)).toFixed(2)} 元,
    您的每日回本营业额为: ${(((formState.monthlyRevenueTotalInvestment as number) / (formState.monthlyRevenueMonth as number) + (formState.monthlyRevenueFixedExpenses as number)) / ((formState.monthlyRevenueGrossMargin as number) / 100) / 30).toFixed(2)} 元
    `
  }
  if (index === 4) {
    oilConsumptionResult.value = `您的油耗每公里为: ${Number(((formState.oilPrice as number) * (formState.oilConsumption as number)) / 100).toFixed(2)}元`
  }
}
</script>

<style lang="less" scoped></style>
